<template>  
    <header>
        <i class="fa fa-list-ul" @click="showSide"></i>
         <img src="../assets/img/img.png" alt="">
    <ul>
            <router-link tag="li" v-for="l in list" :to="l.uri">
                {{l.name}}
               
            </router-link>
            
        </ul>
        <slot></slot>
    </header>
    
</template>
<script>
import bus from '../bus.js'
    export default{
          data(){
        return{
            list:[
                {name:"首页",uri:"/"},
                {name:"漫画",uri:"/comic"},
                {name:"资讯",uri:"/news"},
                {name:"美图",uri:"/image"}
            ]
        }
    },
        methods:{
            showSide(){
                bus.$emit('sideShow')
            },
            // change(num,e){
            //     $(ul>li).eq(num).addClass('is-active').siblings().removeClass('is-active')
            // }
        }
    }
</script>
<style scoped>
    header{
        background: white;
        width: 100%;
        height:80px;
        position:fixed;
        left:0;
        top:0;
        z-index:100;
        text-align: center;
        border-bottom: solid 1px #ff4f65;
    }
    header>img{
        height: 30px;
        width: 90px;
        position: relative;
        top:8px;
    }
    header i{
        color:#ff4f65;
        font-size: 0.6rem;
        display: inline-block;
        position: relative;
        left: -100px;
    }
    ul>li{
        float: left;
        position: relative;
        top: 15px;
        margin-left: 60px;
        font-size: 0.4rem;
        color: gray;
        padding-bottom: 3px;
    }
    ul{
        width: 100%;
          background: papayawhip;
    }
    ul>li:nth-child(1){
        margin-left: 50px;
    }
    .is-active{
    color: #ff4f65;
    border-bottom: solid 1px #ff4f65;
}
</style>